
import { Descriptions } from "antd";
import PropertyInput from "components/PropertyInput";
// import styles from './index.module.less';
import Controller from 'Controller'
import React from "react";

export default function BaseProperties() {

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const selectedElementUuid = threeController.useMemo(s => s.selectedElementUuid, []);

    const elementMap = threeController.useMemo(s => s.elementMap, []);

    const element = React.useMemo(() => selectedElementUuid ? elementMap.get(selectedElementUuid) : undefined, [elementMap, selectedElementUuid])

    /** 修改了名称 */
    const onChangeName = React.useCallback((e: string) => {
        if (!element) return;
        const value = e;
        threeController.pipeline(async s => {
            element.version++;
            element.object3D.name = value;
        })()
    }, [element, threeController])

    if (!element) return <></>;

    return (
        <div>
            <Descriptions
                size="small"
                bordered
                column={1}
            >
                <Descriptions.Item label="UUID">{selectedElementUuid}</Descriptions.Item>
                <Descriptions.Item label="名称"><PropertyInput onChange={onChangeName} value={element.object3D.name} /></Descriptions.Item>
                <Descriptions.Item label="类型">{element.object3D.type}</Descriptions.Item>
            </Descriptions>
        </div >
    )
}
